<!DOCTYPE html>
<html>
<head>
  <title>HTML5 multi-touch</title>
  <style>
      canvas {
          touch-action: none;
      }
  </style>
  <script>
      var canvas;
      var ctx;
      var lastPt = new Object();
      var colours = ['red', 'green', 'blue', 'yellow', 'black'];

      function init() {
          canvas = document.getElementById('mycanvas');
          ctx = canvas.getContext("2d");

          if (window.PointerEvent) {
              canvas.addEventListener("pointerdown", function () {
                      canvas.addEventListener("pointermove", draw, false);
                  }
                  , false);
              canvas.addEventListener("pointerup", endPointer, false);
          } else {
              //Provide fallback for user agents that do not support Pointer Events
              canvas.addEventListener("mousedown", function () {
                      canvas.addEventListener("mousemove", draw, false);
                  }
                  , false);
              canvas.addEventListener("mouseup", endPointer, false);
          }
      }

      function draw(e) {
          var id = e.pointerId;
          if (lastPt[id]) {
              ctx.beginPath();
              ctx.moveTo(lastPt[id].x, lastPt[id].y);
              ctx.lineTo(e.pageX, e.pageY);
              ctx.strokeStyle = colours[id % 5];
              ctx.stroke();
          }
          // Store last point
          lastPt[id] = {x: e.pageX, y: e.pageY};
      }

      function endPointer(e) {
          var id = e.pointerId;
          canvas.removeEventListener("pointermove", draw, false);
          canvas.removeEventListener("mousemove", draw, false);
          // Terminate this touch
          delete lastPt[id];
      }

  </script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="500" height="500">
  Canvas element not supported.
</canvas>
</body>
</html>
